import React, {Component} from 'react';
import TheTable from "../TheTable";
import ThePagination from "../ThePagination";
import PropTypes from "prop-types";

class TheMallOrder extends Component {
    state = {
        tableColumns: [
            {
                title: '订单编号',
                dataIndex: "orderCode",
                key: "orderCode",
            },
            {
                title: '收货人',
                dataIndex: "memberName",
                key: "memberName"
            },
            {
                title: '联系方式',
                dataIndex: "memberPhone",
                key: "memberPhone"
            },
            {
                title: '收货地址',
                dataIndex: "memberAddress",
                key: "memberAddress"
            },
            {
                title: '订单金额（元）',
                dataIndex: "orderTotalPrice",
                key: "orderTotalPrice",
                render: text => <React.$price price={text || 0} symbol={''}/>
            },
            {
                title: '嗨豆抵扣（元）',
                dataIndex: "orderTotalScore",
                key: "orderTotalScore",
                render: text => <React.$price price={text || 0} symbol={''}/>
            },
            {
                title: '服务费（元）',
                dataIndex: "orderTotalServer",
                key: "orderTotalServer",
                render: text => <React.$price price={text || 0} symbol={''}/>
            },
            {
                title: '实付金额（元）',
                dataIndex: "orderPayPrice",
                key: "orderPayPrice",
                render: text => <React.$price price={text || 0} symbol={''}/>
            },
            {
                title: '订单时间',
                dataIndex: "createTime",
                key: "createTime"
            },
            {
                title: '订单状态',
                dataIndex: 'orderState',
                key: 'orderState',
                render: text => {
                    let label = null
                    switch (text) {
                        case '3':
                            label = <span style={{color: '#d9001b'}}>待付款</span>
                            break;
                        case '4':
                            label = <span style={{color: '#f59a23'}}>待发货</span>
                            break;
                        case '5':
                            label = <span style={{color: '#70b603'}}>待收货</span>
                            break;
                        case '9':
                            label = <span style={{color: '#70b685'}}>交易成功</span>
                            break;
                        case '0':
                            label = <span style={{color: '#c280ff'}}>交易关闭</span>
                            break;
                    }
                    return label
                }
            }
        ],
    }

    render() {
        const {tableColumns} = this.state
        const {loading, dataSource, pageNo, pageSize, total, pagination, pageChange} = this.props
        return <>
            <TheTable loading={loading} dataSource={dataSource} columns={tableColumns}/>
            {pagination &&
            <ThePagination pageChange={pageChange} pageNo={pageNo} pageSize={pageSize} total={total}/>}
        </>
    }
}

TheMallOrder.propTypes = {
    pageNo: PropTypes.number,
    pageSize: PropTypes.number,
    total: PropTypes.number || PropTypes.string,
    loading: PropTypes.bool,
    dataSource: PropTypes.array || PropTypes.object,
    pagination: PropTypes.bool
}
TheMallOrder.defaultProps = {
    pageSize: 10,
    pageNo: 1,
    total: 1,
    loading: false,
    dataSource: [],
    pagination: true
}
export default TheMallOrder;